<template>
    <div class="addCommodity-box">
        <div class="addCommodity-one">
            <div class="addCommodity-one-left"><span></span> &nbsp&nbsp商品添加</div>
            <div class="addCommodity-one-right">
                <el-button class="edit_btn" @click="$router.push('/Account')"><i class="el-icon-arrow-left"></i><span>返回</span></el-button>
                <el-button class="edit_btn" @click="shua"><i class="el-icon-refresh">&nbsp&nbsp刷新</i></el-button>
            </div>
        </div>
        <div class="addCommodity-two">
            <div class="addCommodity-two-xinxi">
                <div class="right"></div> <!--向右的三角形-->
                <div class="addCommodity-two-ding"><i class="el-icon-collection-tag" style="color: #fff;font-size: 18px;"><div>添加商品信息</div></i></div>
            </div>
            <div class="addCommodity-two-form">
                <el-row>
                    <el-form
                            :label-position="labelPosition"
                            label-width="110px"
                            ref="addQuery"
                            :model="addQuery"
                            :rules="rule">
                        <!-- 商品分类 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品分类：">
                                <el-select v-model="addQuery.categroyId" placeholder="请选择商品分类" style="width:100%">
                                    <el-option label="书籍" :value="1"></el-option>
                                    <el-option label="服装" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 商品名称 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品名称：" prop="productName">
                                <el-input v-model="addQuery.productName" placeholder="请选择商品名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 商品销量 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品销量：" prop="hits">
                                <el-input v-model="addQuery.hits" placeholder="请选择商品销量"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 商品货号 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品货号：" prop="productCode">
                                <el-input v-model="addQuery.productCode" placeholder="请选择商品货号"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 商品售价 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品售价：" prop="currentpriceProduct">
                                <el-input v-model="addQuery.currentpriceProduct" placeholder="请选择商品售价"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 商品状态 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品状态：">
                                <el-select v-model="addQuery.productSate" placeholder="请选择商品状态" style="width:100%">
                                    <el-option label="上架" :value="1"></el-option>
                                    <el-option label="下架" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 商品审核 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品审核：">
                                <el-select v-model="addQuery.productCstatus" placeholder="请选择商品审核" style="width:100%">
                                    <el-option label="未审核" :value="3"></el-option>
                                    <el-option label="审核中" :value="4"></el-option>
                                    <el-option label="审核失败" :value="5"></el-option>
                                    <el-option label="其他" :value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 更新人 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="更新人：">
                                <el-select v-model="addQuery.cpdateUser" placeholder="请选择更新人" style="width:100%">
                                    <el-option label="张三" :value="1"></el-option>
                                    <el-option label="李四" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 图片上传 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品预览图：" prop="mainImage">
                                <el-upload
                                    ref="addQuery"
                                    action=""
                                    accept="image/*"
                                    :limit="Number(9)"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :on-change="UploadImage"
                                    :before-upload="beforeUpload"
                                    :file-list="fileList"
                                    :auto-upload="false"
                                    :class="{hide:hideUploadEdit}"
                                    class="upload_img">
                                    <i class="el-icon-plus"></i>
                                    <template #tip>
                                        <div style="font-size: 12px;color: #919191;">单次限制上传一张图片</div>
                                    </template>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible" style="line-height: 0;">
                                    <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt=""/>
                                </el-dialog>
                            </el-form-item>
                        </el-col>
                        <!-- 商品标签 -->
                        <el-col :span="14" :offset="6">
                            <el-form-item label="商品标签：" prop="productDescription">
                                <el-input v-model="addQuery.productDescription" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" placeholder="请输入商品标签"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 商品介绍 -->
                        <el-col :span="14" :offset="6">
                            <el-form-item label="商品介绍：" prop="searchKeywords">
                                <el-input placeholder="请输入商品介绍" type="textarea" :autosize="{ minRows: 6, maxRows: 4}" v-model="addQuery.searchKeywords"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 商品推荐 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="商品推荐：">
                                <el-checkbox-group v-model="addQuery.recommend">
                                    <el-checkbox :true-label="2" label="新品" checked></el-checkbox>
                                    <el-checkbox :true-label="3" label="推荐"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                        <!-- 可用优惠卷 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="可用优惠卷：">
                                <el-radio-group v-model="addQuery.discount">
                                    <el-radio label="2">否</el-radio>
                                    <el-radio label="3">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <!-- 服务保证 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="服务保证：">
                                <el-checkbox-group v-model="addQuery.ensure">
                                    <el-checkbox :true-label="2" label="无忧退货" checked></el-checkbox>
                                    <el-checkbox :true-label="3" label="快速退款"></el-checkbox>
                                    <el-checkbox :true-label="4" label="免费包邮"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <div slot="footer" class="btn">
                    <el-button type="success" class="footer_qd" @click="addInsert('addQuery')">完成，提交商品</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AddCommodity",
        inject: ['reload'],//注入
        data(){
            return{
                //上传的文件列表
                fileList:[],
                //对话框中的图片（放大效果）
                dialogImageUrl:"",
                //是否隐藏上传按钮
                hideUploadEdit:false,
                //限制上传按钮上传9张，9张之后隐藏
                limit:9,
                //图片的弹窗
                dialogVisible: false,
                //添加按钮中的的label的样式
                labelPosition: "right",
                //添加按钮中的数据
                addQuery:{
                    categroyId:"",//商品分类（1、书籍2、服装）
                    productName:"",//商品名称
                    mainImage:"",//商品图片
                    productDescription:"",//商品标签（商品描述）
                    searchKeywords:"",//商品介绍（搜索商品的关键字）
                    productCode:"",//商品货号(商品编号)
                    currentpriceProduct:"",//商品价格
                    recommend:"",//商品推荐
                    discount:"3",//可用优惠卷（单选框默认选中）
                    ensure:"",//服务保证
                    hits:"",//商品销量
                    productSate:"",//上架下架
                    productCstatus:"",//商品审核
                    cpdateUser:"",//更新人
                },
                //添加的时候必填项验证
                rule: {
                    productName:[
                        {required:true,message:'商品名称不可以为空'},
                        {min:3,max:5,message:'长度在3到5个字符'}
                    ],
                    mainImage:[
                        {required:true,message:'商品图片不可以为空'},
                        {message:'请输入商品商品图片'}
                    ],
                    productDescription:[
                        {required:true,message:'商品标签不可以为空'},
                        {message:'请输入商品标签'}
                    ],
                    searchKeywords:[
                        {required:true,message:'商品介绍不可以为空'},
                        {message:'请输入商品活动'}
                    ],
                    productCode:[
                        {required:true,message:'商品货号不可以为空'},
                        {message:'请输入商品货号'}
                    ],
                    hits:[
                        {required:true,message:'商品销量不能为空'},
                        {type:'number',transform:(value) => Number(value), message:'商品销量必须为数字值'}
                    ],
                    currentpriceProduct:[
                        {required:true,message:'商品售价不能为空'},
                        {type:'number',transform:(value) => Number(value), message:'商品售价必须为数字值'}
                    ],
                }
            }
        },
        methods:{
            //限制图片的上传
            beforeUpload(file){
                const isLt2M = file.size / 1024 /1024 < 2;
                if (!isLt2M){
                    this.$message.error("上传图片不能超过2MB");
                }
                return isLt2M;
            },
            //上传图片的方法
            UploadImage(file,fileList){
                this.hideUploadEdit = fileList.length >= this.limit;
                console.log(file);
                let fd = new FormData()
                //传给后台接收的名字
                fd.append("file",file.raw)
                this.$http.post("/fileImg/mainImage",fd,{headers:{"Content-Type" : "multipart/form-data"}}).then(response =>{
                    //上传成功后返回的数据
                    console.log("上传图片到："+response.data);
                    //将图片地址给到表单
                    this.addQuery.mainImage = response.data
                })
            },
            //移除图片的功能
            handleRemove(file,fileList){
                console.log(file,fileList);
                this.hideUploadEdit = fileList.length >= this.limit;
            },
            //预览图片功能
            handlePictureCardPreview(file){
                console.log(file.url);
                this.addQuery.mainImage = file.name
                this.dialogVisible = true
                this.dialogImageUrl = file.url
            },
            //刷新按钮
            shua(){
                this.reload();//局部刷新
            },
            //添加完成的按钮
            addInsert(formName){
                //validate ：需要表单重新验证一下
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        this.$http.get("/jsproduct/getAddInsert",{
                            params:{
                                "categroyId":this.addQuery.categroyId,
                                "productName":this.addQuery.productName,
                                "hits":this.addQuery.hits,
                                "mainImage":this.addQuery.mainImage,
                                "productDescription":this.addQuery.productDescription,
                                "searchKeywords":this.addQuery.searchKeywords,
                                "productCode":this.addQuery.productCode,
                                "currentpriceProduct":this.addQuery.currentpriceProduct,
                                "recommend":this.addQuery.recommend,
                                "discount":this.addQuery.discount,
                                "ensure":this.addQuery.ensure,
                                "productSate":this.addQuery.productSate,
                                "productCstatus":this.addQuery.productCstatus,
                                "cpdateUser":this.addQuery.cpdateUser
                            }
                        }).then(res =>{
                            console.log(this.addQuery.mainImage);
                            this.$http.get("/journal/insertLog",{
                                params:{
                                    "journalName":this.addQuery.productName,
                                    "journalPrice":this.addQuery.currentpriceProduct,
                                    "journalPrices":this.addQuery.currentpriceProduct,
                                    "journalStat":this.addQuery.productSate,
                                    "journalShe":this.addQuery.productCstatus,
                                    "journalPeople":this.addQuery.cpdateUser,
                                }
                            })
                            alert("添加成功！！！");
                        }).catch(err =>{
                            alert("添加数据请求失败！！！");
                        })
                    } else{
                        console.log("error submit")
                        return false;
                    }
                })

            }
        },
    }
</script>

<style scoped long="less">
    /*初始化样式*/
    *{
        padding: 0;
        margin: 0;
        font-size: 13px;
    }
    /*改变按钮的样式*/
    .edit_btn{
        margin-top: 8px;
        height: 35px;
        line-height: 10px;
        width: 100px;
    }
    /*在外边套一个盒子，使页面不会乱跑*/
    .addCommodity-box{
        width: 1470px;
    }
    /*商品添加需要页面百分百*/
    .addCommodity-one{
        height: 50px;
        line-height: 50px;
        width: 100%;
        background: #F3F3F3;
    }
    /*商品添加需要左浮动*/
    .addCommodity-one-left{
        float: left;
        color: #99A4BF;
    }
    /*返回等一些按钮需要右浮动*/
    .addCommodity-one-right{
        float: right;
        padding-right: 125px;
    }
    /*商品添加需要一个绿色的边框*/
    .addCommodity-one-left span{
        padding-left: 0px;
        border-left: 5px solid #1ABC9C;
    }
    /*添加商品需要居中四边需要一个边框*/
    .addCommodity-two{
        width: 1000px;
        margin: 0 auto;
        border: 1px solid #E4E4E4;
    }
    /*添加商品信息的样式*/
    .addCommodity-two-xinxi{
        position: relative;
        top: 40px;
        left: -200px;
        float: left;
        width: 230px;
        height: 50px;
        background: rgba(158,167,180,.8);
    }
    /*需要设置一个右边的三角形边框以及需要定位定上去*/
    .addCommodity-two-xinxi .right{
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-left: 26px solid rgba(158,167,180,.8);
        border-bottom: 20px solid transparent;
        font-size: 0;
        line-height: 0;
        position: relative;
        left: 230px;
    }
    /*添加商品信息的文字需要一个定位*/
    .addCommodity-two-ding{
        position: relative;
        top: -35px;
        padding-left: 25px;
    }
    /*商品信息需要右浮动*/
    .addCommodity-two-ding div{
        font-size: 18px;
        color: #fff;
        float: right;
    }
    /*商品的表单信息样式*/
    .addCommodity-two-form{
        padding-top: 100px;
    }
    /*弹窗的确定按钮样式*/
    .footer_qd{
          background: #1ABC9C;
          width: 150px;
    }
    /*添加按钮的居中样式*/
    .btn{
        text-align: center;
        padding-bottom: 50px;
    }
    /*预览图效果*/
    .upload_img{
        width: 468px;
        height: 100%;
        border: 1px solid #E5E5E5;
        padding: 10px 0px 0px 7px;
        vertical-align: middle;
    }
</style>
<style long="less">
    /*隐藏上传按钮的图片（上传最大限制隐藏）*/
    .hide .el-upload--picture-card {
        display: none;
    }
</style>